<template>
  <div
    class="contentFrame"
    :style="{ height: height + '%', width: width + '%' }"
  >
    <div class="contentFrame__title">
      <p class="contentFrame__title__name">{{ title }}</p>
      <slot name="more"> </slot>
    </div>
    <div class="contentFrame__content">
      <div class="contentFrame__content__Margins">
        <slot> </slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "contentFrame",
  props: {
    height: {
      type: Number,
      default: 30
    },
    width: {
      type: Number,
      default: 100
    },
    title: {
      type: String,
      default: "标题文字"
    }
  },
  data() {
    return {};
  },
  /**所有方法*/
  methods: {}
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.contentFrame {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  &__title {
    height: 2.8vh;
    width: 100%;
    background: linear-gradient(
      90deg,
      rgba(23, 49, 71, 1),
      rgba(57, 131, 193, 0.2)
    );
    border-bottom: 2px #21597699 solid;
    display: flex;
    align-content: center;
    &__name {
      font-size: 20px;
      font-weight: 400;
      color: #eee3e3;
      line-height: 26px;
      text-shadow: 1px 1px 1px#ffffff;
      padding-left: 2.5%;
    }
  }
  &__content {
    height: 90%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &__Margins {
      height: 95%;
      width: 95%;
    }
  }
}
</style>
